/*
 * @Descripttion:
 * @version: 1.0.0
 * @Author: Shentong
 * @Date: 2021-04-09 12:34:34
 * @LastEditors: Shentong
 * @LastEditTime: 2021-11-12 17:31:58
 */
/**
 * @description 此页面暂时不用： TODO:
 */
// eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React, { useEffect, useState, useRef } from "react";

import Taro from '@tarojs/taro'

import FlyBall from '@/components/custom/flyBall'

 import { View, Button } from "@tarojs/components";

 import styles from './index.module.scss'

 const demoPage = () => {
  const [launchXY, setLaunchXY] = useState({})
  const [targetXY, setTargetXY] = useState({x:0,y:0})
  const [showBall, setShowBall] = useState(false)
  /**
   * @description 初始化获取目标元素坐标
   */
   const getTargetDom = async () => {
    const a: any = await new Promise(resolve => {
      Taro.createSelectorQuery()
        .select('#targetDom')
        .boundingClientRect(res => {
          resolve(res)
        })
        .exec()
    })
    setTargetXY({x: a.left, y: a.top})
  }


  function startRunning(e) {
    const { detail } = e
    setLaunchXY({x: detail.x, y: detail.y})

    setShowBall(true)
  }

  useEffect(() => {
    Taro.nextTick(async () => {
      await getTargetDom()
    })
  }, [])
  
   return (
     <View className={styles.demoPage}>
      <FlyBall 
        startXY={launchXY}
        targetXY={targetXY}
        showBall={showBall}
      />
      <View className={styles['cart-animation']}>
        
          <View className={styles.add}  onClick={startRunning}> + </View>

          <View className={styles.cart}>
            <View id='targetDom'>
              <Button type='primary' className={styles['left-top']}>购物车1号 </Button>
            </View>
          </View>
     </View>
     </View>
   );
 }

 export default demoPage
